<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script src="js/jquery-1.4.min.js" type="text/javascript"></script>
<script src="js/custom.js" type="text/javascript"></script>

<title>JS Test</title>

<style type="text/css">
body {
	width: 960px;
	margin: 0 auto;
}
#menu {
	margin: 0 auto;
	width: 500px;
}
#menu li {
	list-style:none;
	margin: 0px;
	padding: 0px;
	float: left;
	width: 23%;
	text-align: center;
	border-bottom: 1px black solid;
	background-color: #0066FF;
	color: white;
}
</style>
</head>

<body>

<h1>A JavaScript Test on jQuery</h1>
<ul id="menu">
	<li>Item1</li>
	<li>Item2</li>
	<li>Item3</li>
	<li>Item4</li>
</ul>
<p style="float: left; clear: both;">
Example: Text Hint<br />
Description: Desplay given string in grey on page load. The first time user focuses on a textbox, it will clear its content and turn its color to normal.<br />
<br />
Example: Ajax<br />
Description: The following textboxes have another function. When you click on one of them, they will sent which textbox you have focused and what is in the textbox to a php file called "ajax.php". The response text will be placed at the right side.
</p>
<form style="float: left;">
<input type="text" value="" />
<input type="text" value="" />
<input type="text" value="" />
</form>
<div id="ajaxtest" style="float: left;">
{$timestamp}<br />
{FORMHASH}
</div>

</body>

</html>
